import React, { useState } from 'react';
import { Button, Input, Table, Form, Space, Pagination, Modal, message, Select } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';

const { Option } = Select;

const mockData = [
  { key: 1, owner: '张旭', contact: '18767256412', plate: '豫A00FX2', model: '丰田2020款 2.5L 无级 尊贵版', type: '包月车', amount: 300, date: '2022-01-23', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 2, owner: '李君康', contact: '13208432854', plate: '浙A88888', model: '阿斯顿·马丁2012款 6.0L 手自一体', type: '临时车', amount: 16, date: '2022-02-08', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 3, owner: '李菲菲', contact: '18767256412', plate: '浙A35467', model: '奥迪2020款 2.0T 双离合 40TFSI 运动版', type: '临时车', amount: 8, date: '2022-02-08', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 4, owner: '张倩倩', contact: '13208432854', plate: '陕12345', model: '标致2005款 3.0L 手自一体', type: '包月车', amount: 300, date: '2022-01-23', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 5, owner: '洛佳', contact: '18767256412', plate: '黑A99673', model: '标致2007款 2.0L 手自一体 精装版', type: '包月车', amount: 300, date: '2022-01-23', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 6, owner: '徐林', contact: '13208432854', plate: '京A66666', model: '保时捷2019款 自动 Turbo S', type: '包月车', amount: 300, date: '2022-01-23', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 7, owner: '张辉', contact: '18767256412', plate: '沪C99999', model: '奥迪2011款 3.2L 手自一体 旗舰版', type: '包月车', amount: 300, date: '2022-01-23', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 8, owner: '胡东来', contact: '13208432854', plate: '浙S874QW', model: '奥迪2013款 2.0T 双离合 TFSI 技术版', type: '包月车', amount: 40, date: '2022-02-08', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 9, owner: '缪贤身', contact: '18767256412', plate: '浙B45781', model: '奥迪2012款 1.8T 无级 舒适版', type: '临时车', amount: 200, date: '2022-02-08', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
  { key: 10, owner: '陆灵玉', contact: '13208432854', plate: '浙AW5846', model: '保时捷2019款 2.9T 双离合 四驱', type: '临时车', amount: 32, date: '2022-02-08', height: '5米', resourceImg: '/1.jpg', planImg: '/2.jpg' },
];

export default function CarBill() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [data, setData] = useState(mockData);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const location = useLocation();
  const [detailVisible, setDetailVisible] = useState(false);
  const [detailData, setDetailData] = useState(null);

  React.useEffect(() => {
    if (location.state && location.state.newCarBill) {
      setData(prevData => [location.state.newCarBill, ...prevData]);
    }
    // eslint-disable-next-line
  }, [location.state]);

  const showDetail = (record) => {
    setDetailData(record);
    setDetailVisible(true);
  };

  const columns = [
    { title: '车主姓名', dataIndex: 'owner', align: 'center' },
    { title: '联系方式', dataIndex: 'contact', align: 'center' },
    { title: '车牌号码', dataIndex: 'plate', align: 'center' },
    { title: '车辆型号', dataIndex: 'model', align: 'center' },
    { title: '车辆类型', dataIndex: 'type', align: 'center' },
    { title: '缴费金额', dataIndex: 'amount', align: 'center' },
    { title: '缴费时间', dataIndex: 'date', align: 'center' },
    {
      title: '操作',
      align: 'center',
      render: (_, record) => (
        <Space>
          <Button type="link" onClick={() => showDetail(record)}>详情</Button>
          <Button type="link" danger onClick={() => handleDelete(record.key)}>删除</Button>
        </Space>
      ),
    },
  ];

  const handleDelete = (key) => {
    Modal.confirm({
      title: '确认删除该账单吗？',
      onOk: () => setData(data.filter(item => item.key !== key)),
    });
  };

  const handleBatchDelete = () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请先选择要删除的账单');
      return;
    }
    Modal.confirm({
      title: '确认批量删除所选账单吗？',
      onOk: () => {
        setData(data.filter(item => !selectedRowKeys.includes(item.key)));
        setSelectedRowKeys([]);
      },
    });
  };

  return (
    <div style={{ background: '#fff', minHeight: '100vh', padding: 24 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button type="default" icon={<ArrowLeftOutlined />} onClick={() => navigate('/dashboard/enterprise')} style={{ marginRight: 16 }}>
            返回
          </Button>
          <div style={{ width: 12, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>车辆缴费账单</span>
        </div>
        <div>
          <Button type="primary" style={{ background: '#21a1ff', border: 'none', marginRight: 16, fontWeight: 700 }} onClick={() => navigate('/car-bill/create')}>新增</Button>
          <Button style={{ background: '#ffc107', color: '#fff', border: 'none', fontWeight: 700 }} onClick={handleBatchDelete}>批量删除</Button>
        </div>
      </div>
      <div style={{ background: '#fff', borderRadius: 8, border: '1px solid #e5e6eb', padding: 24, marginBottom: 24 }}>
        <Form layout="inline" form={form} style={{ marginBottom: 16 }}>
          <Form.Item label="车辆号码:" name="plate">
            <Input placeholder="请输入车辆号码" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="联系方式:" name="contact">
            <Input placeholder="请输入联系方式" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="车辆类型:" name="type">
            <Select placeholder="请选择" style={{ width: 200 }} allowClear>
              <Option value="包月车">包月车</Option>
              <Option value="临时车">临时车</Option>
            </Select>
          </Form.Item>
          <Button type="primary" style={{ marginLeft: 16 }}>查询</Button>
          <Button style={{ marginLeft: 16 }}>重置</Button>
        </Form>
        <Table
          rowSelection={{
            selectedRowKeys,
            onChange: setSelectedRowKeys,
          }}
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered
          style={{ background: '#fff' }}
        />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24 }}>
          <span>共 100 条</span>
          <Pagination
            total={100}
            showSizeChanger
            showQuickJumper
            pageSizeOptions={[10, 20, 50]}
            defaultPageSize={10}
            style={{ marginRight: 16 }}
          />
          <span>
            到第 <Input style={{ width: 50, margin: '0 8px' }} size="small" /> 页
            <Button size="small">确定</Button>
          </span>
        </div>
      </div>
      <Modal
        open={detailVisible}
        title="账单详情"
        footer={null}
        onCancel={() => setDetailVisible(false)}
        width={700}
      >
        {detailData && (
          <div style={{ display: 'flex', gap: 32 }}>
            <div style={{ flex: 1 }}>
              <div style={{ marginBottom: 16 }}>
                <span style={{ color: 'red', marginRight: 4 }}>*</span>房间层高：
                <Input value={detailData.height} readOnly style={{ width: 120, display: 'inline-block', marginLeft: 8 }} />
              </div>
              <div style={{ marginBottom: 16 }}>
                <span style={{ color: 'red', marginRight: 4 }}>*</span>资源展示图：<br />
                <img src={detailData.resourceImg} alt="资源展示图" style={{ width: 220, height: 120, objectFit: 'cover', marginTop: 8 }} />
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ marginBottom: 16 }}>
                <span style={{ color: 'red', marginRight: 4 }}>*</span>户型图：<br />
                <img src={detailData.planImg} alt="户型图" style={{ width: 220, height: 120, objectFit: 'cover', marginTop: 8 }} />
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
} 